<template>
  <div class="app-container">
    <el-form :model="formData"
             label-width="120px"
             label-position="left">
      <el-form-item label="大学名称">
        <el-input v-model="formData.name"
                  disabled> </el-input>
      </el-form-item>
      <el-form-item label="大学批次">
        <el-select v-model="formData.number"
                   style="width:500px;"
                   placeholder="请选择">
          <el-option v-for="item in volunteerList"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属省">
        <el-select v-model="formData.provinceId"
                   placeholder="请选择省"
                   @change="provinceChange">
          <el-option v-for="item in provinceList"
                     :key="item.regionId"
                     :label="item.regionName"
                     :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属市">
        <el-select v-model="formData.cityId"
                   placeholder="请选择市"
                   @change="cityChange">
          <el-option v-for="item in cityList"
                     :key="item.regionId"
                     :label="item.regionName"
                     :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属区县">
        <el-select v-model="formData.areaId"
                   placeholder="请选择区县">
          <el-option v-for="item in areaList"
                     :key="item.regionId"
                     :label="item.regionName"
                     :value="item.regionId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="大学校徽">
        <el-row>
          <el-col :span="3">
            <el-upload :action="uploadUrl"
                       :multiple="false"
                       :on-success="uploadSuccess">
              <el-button size="small"
                         type="primary">点击上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="2">
            <el-avatar shape="square"
                       size="large"
                       :src="formData.badge"></el-avatar>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="大学宣传图">
        <el-row>
          <el-col :span="3">
            <el-upload :action="uploadUrl"
                       accept="image/jpeg,image/gif,image/png"
                       :before-upload="onBeforeUpload"
                       multiple
                       :limit="3"
                       :on-remove="handleRemove"
                       :on-success="uploadBannerSuccess">
              <el-button size="small"
                         type="primary">点击上传</el-button>
            </el-upload>
          </el-col>
          <el-col :span="2"
                  v-for="bImage in formData.bannerImage"
                  :key="bImage">
            <el-avatar shape="square"
                       size="large"
                       :src="bImage"></el-avatar>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="院校代号">
        <el-input v-model="formData.code"> </el-input>
      </el-form-item>
      <el-form-item label="院校标签">
        <el-select v-model="formData.label"
                   style="width:500px;"
                   multiple
                   filterable
                   placeholder="请选择">
          <el-option v-for="item in labelOptions"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学校招生简章">
        <Tinymce v-model="formData.desc"
                 :height="200" />
      </el-form-item>
    </el-form>
    <div class="submit-box">
      <el-button type="primary"
                 :loading="loading"
                 style="width: 200px;"
                 @click.native.prevent="doSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import ElDragSelect from "@/components/DragSelect";
import Tinymce from "@/components/Tinymce";
import { edit, getDetail } from "@/api/my_university";
import { errorMsg, successMsg } from "@/utils/my";
import { getUniversitylabelList } from "@/api/label";
import { getChildren } from '@/api/region';

export default {
  components: {
    Tinymce,
    ElDragSelect
  },

  data () {
    return {
      loading: false,
      labelOptions: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      reqData: {
        parentId: 0,
        level: 1
      },
      volunteerList: [
        { id: 1, name: '本科一批' },
        { id: 2, name: '本科二批' },
        { id: 3, name: '高职高专' }
      ],
      formData: {
        id: 0,
        name: '',
        number: '',
        provinceId: '',
        cityId: '',
        areaId: '',
        badge: '',
        bannerImage: [],
        code: '',
        label: [],
        desc: ''
      }
    };
  },

  created () {
    //this.formData.id = this.$route.params.id;
    this.fetchData();
    this.fetchUniversityLabelList();
  },
  computed: {

    uploadUrl () {
      return `${process.env.VUE_APP_BASE_API}/upload`
    }
  },
  methods: {
    onBeforeUpload (file) {
      const isImage = file.type === 'image/jpeg' || 'image/gif' || 'image/png';
      const isLimit1M = file.size / 1024 / 1024 < 1;
      if (!isImage) {
        this.$message.error('上传文件只能是图片格式!');
      }
      if (!isLimit1M) {
        this.$message.error('上传文件大小不能超过 1MB!');
      }
      return isImage && isLimit1M;
    },
    fetchData () {
      let that = this;
      getDetail().then(res => {
        that.formData.id = res.data.universityId;
        that.formData.name = res.data.universityName;
        that.formData.number = res.data.universityNumber;
        that.formData.provinceId = res.data.provinceId <= 0 ? '' : parseInt(res.data.provinceId);
        that.formData.cityId = res.data.cityId <= 0 ? '' : parseInt(res.data.cityId);
        that.formData.areaId = res.data.areaId <= 0 ? '' : parseInt(res.data.areaId);
        that.formData.badge = res.data.universityBadge;
        that.formData.bannerImage = res.data.bannerImage;
        that.formData.code = res.data.universityCode;
        that.formData.desc = res.data.universityDesc;
        that.formData.label = res.data.universityLabel;

        that.chinaChange(0, parseInt(that.formData.provinceId), parseInt(that.formData.cityId))
      });
    },

    doSubmit () {
      let that = this,
        d = that.formData;
      if (d.name.length <= 0) {
        return errorMsg("请输入大学名称");
      }
      if (d.number.length <= 0) {
        return errorMsg("请选择大学批次");
      }
      d.id = d.id <= 0 ? '' : d.id.toString()
      d.number = d.number.length <= 0 ? '' : (d.number).toString()
      d.provinceId = d.provinceId.length <= 0 ? '' : (d.provinceId).toString()
      d.cityId = d.cityId.length <= 0 ? '' : (d.cityId).toString()
      d.areaId = d.areaId.length <= 0 ? '' : (d.areaId).toString()
      d.code = d.code.length <= 0 ? '' : (d.code).toString()

      if (d.areaId.length > 0 && d.cityId.length <= 0) {
        return errorMsg("请选择省市区")
      }
      if (d.cityId.length > 0 && d.provinceId.length <= 0) {
        return errorMsg("请选择省市区")
      }
      if (d.provinceId.length <= 0) {
        return errorMsg("请选择省份")
      }

      if (d.badge.length <= 0) {
        return errorMsg("请上传大学校徽");
      }
      if (d.bannerImage.length <= 0) {
        return errorMsg("请上传公司宣传图222");
      }
      if (d.code <= 0) {
        return errorMsg("请输入院校代号");
      }
      if (d.label.length <= 0) {
        return errorMsg("请输入院校标签");
      }
      if (d.desc.length <= 0) {
        return errorMsg("学校招生简章");
      }
      that.loading = true;
      edit(that.formData).then(res => {
        that.loading = false;
        if (res.code != 20000) {
          return errorMsg(res.message);
        }
        successMsg(res.message);
        setTimeout(function () {
          that.$router.push({ path: "/admin/my-university/edit" });
        }, 1500);
      });
    },
    uploadSuccess (res) {
      this.formData.badge = res.data.url;
    },
    handleRemove: function (file) {
      //deleteImage(this, file.response.code);
    },
    uploadBannerSuccess (res) {
      //this.formData.bannerImage = res.data.url;
      if (res.data.url.length > 0) {
        this.formData.bannerImage.push(res.data.url);
      }
    },
    fetchUniversityLabelList () {
      const that = this;
      getUniversitylabelList({
        name: that.formData.name
      }).then(res => {
        that.labelOptions = res.data.list
      });
    },
    fetchRegionData () {
      const that = this
      getChildren(that.reqData).then(
        res => {
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          if (that.reqData.level == 1) {
            that.provinceList = res.data
          } else if (that.reqData.level == 2) {
            that.cityList = res.data
          } else if (that.reqData.level == 3) {
            that.areaList = res.data
          }
        })
    },
    chinaChange (cId, pId, aId) {
      const that = this

      getChildren({ parentId: cId, level: 1 }).then(
        res => {
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          that.provinceList = res.data
        })

      getChildren({ parentId: pId, level: 2 }).then(
        res => {
          if (res.code != 20000) {
            return errorMsg(res.message)
          }
          that.cityList = res.data
        })

      if (aId > 0) {
        getChildren({ parentId: aId, level: 3 }).then(
          res => {
            if (res.code != 20000) {
              return errorMsg(res.message)
            }
            that.areaList = res.data
          })
      }

    },
    provinceChange (id) {
      this.reqData.parentId = id
      this.reqData.level = 2
      this.fetchRegionData()
      this.formData.cityId = ''
      this.formData.areaId = ''
    },
    cityChange (id) {
      this.reqData.parentId = id
      this.reqData.level = 3
      this.fetchRegionData()
      this.formData.areaId = ''
    }
  }
};
</script>

<style>
.submit-box {
  height: 50px;
  line-height: 50px;
  text-align: center;
  padding-right: 20px;
}
</style>
